import React, { Component } from 'react';
import ReactDOM from 'react-dom';


/**
 * React 元素渲染 - 未重构的代码版本
 * @date 2020-11-21
 */

class RenderFlag extends React.Component {
    static FLAG_SAMPLERENDER = 0
    static FLAG_TICK = 1
    static FLAG_CLOCKRENDER = 2
}

/**
 * React 元素渲染
 */
function sampleRender() {
    const element = <h1>Hello,wold!</h1>
    ReactDOM.render(
        element,
        // 把组件挂载到指定的div根节点下
        document.getElementById('container')
    );
}

/**
 * 这是一个更新元素渲染的示例
 * 定时器函数
 */
function tickRender() {
    const element = (
        <div>
            <h1>Hello,world!</h1>
            <h2>现在是{new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        // 把组件挂载到指定的div节点下
        document.getElementById('container')
    );
}


/**
 * 测试定时器
 *  这个方法不适用于newTickRender要注意哦，别坑
 */
function testTick() {
    // 通过setInterval方法，每秒调用一次ReactDOM.render方法更新渲染
    setInterval(tickRender, 1000);
}

/**
 * 对展示的部分进行封装
 * @param {日期类} props 
 */
function Clock(props) {
    return (
        <div>
            <h1>Hello,My First Clock!</h1>
            <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
        </div>
    );
}

/**
 * 测试控件
 */
function testClockRender() {
    ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('container')
    );
}

/**
 * 测试渲染
 *  未重构之前的代码，也是可以使用的
 */
// 直接导出方法
// export function testRenderMain(){
function testRenderMain(flag) {
    switch (flag) {
        case RenderFlag.FLAG_SAMPLERENDER:
            sampleRender();
            break;
        case RenderFlag.FLAG_TICK:
            testTick();
            break;
        case RenderFlag.FLAG_CLOCKRENDER:
            testClockRender();
            break;
    }
}

export { RenderFlag, testRenderMain }